
{if $photo&&!$type}

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name=x5-orientation content=portrait>
    <meta name=screen-orientation content=portrait>
    <title>馆员证</title>
    <link rel="stylesheet" href="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/css/cert2.css">
    <script type="text/javascript" src="{SITE_URL}public/js/rem.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/html2canvas.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/smatchScreen.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery.qrcode.min.js"></script>
    <link rel="stylesheet" href="{SITE_URL}public/font-awesome/css/font-awesome.min.css">
    <style>
        .one {
        width: 20px;
        margin: 0 auto;
        line-height: 50px;
        font-size: 36px;
        }
    </style>
</head>
<body>
<!--画报-->


<div class="poster" data-id="poster">
    <div class="container" data-id="container">
        <div class="word-box" style="text-align: left;padding-left: 50px;">
            <div class='one' style="padding-left:160px;font-weight: 800;font-size: 40px">
                {$GLOBALS['TS_USER']['username']}
            </div>

            <div style="padding-top: 100px;padding-left: 60px" class="photo"><img  style="border-radius: 320px" src="{SITE_URL}{$photoUrl}"  width="320" height="320"></div>

            <div style="padding-top: 50px;padding-left: 60px;font-weight: 800;font-size: 40px;">
              <div style="display: flex"> <img src="{SITE_URL}public/images/spot.png"  width="44"  height="44">&nbsp;{$strGroup['groupname']}</div>
            </div>

            <div style="padding-top:30px;padding-left: 60px;font-weight: 800;font-size: 40px;display: flex">
                <div style="display: flex"> <img src="{SITE_URL}public/images/house.png"  width="44" height="44">&nbsp;{$strGroup['groupdesc']}</div>

                <div style="float: right;position:relative;">


                    <img class=transparent src="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/images/seal.png" style="width:240px;height:240px;position:absolute;right:-120px;top:-95px;"  />

                </div>
            </div>
        </div>
        <div class="seal"></div>

    </div>
</div>
<!--操作按钮-->
<div class="download-image">
    <div class="button" data-bind="download">
        <img src="{SITE_URL}public/images/download.jpg" alt="图片" class="poster-image" data-id="image">
        <span style="padding: 20px">长按这里下载图片<i class="fa fa-download" aria-hidden="true"></i></span>

    </div>
    <span style="font-size: large;text-align: center"><a href="{tsUrl('group','cert2',array('groupid'=>$groupid,'type'=>1))}">更新照片</a></span>

</div>





<script>
  $(function () {
    // 初始化一屏幕的高度
    var clientHeight = document.documentElement.clientHeight;
    $("[data-id='poster']").css({height:clientHeight+'px'});
    // 缩放图片
    SmatchScreen($("[data-id='container']").get(0), 'v-v', 750, 1334, false, false);

    // 此处是生成图片
    window.onload=function(){
      var screenRate = clientHeight / 1334
      html2canvas($("[data-id='container']").get(0),{
        useCORS:true,
        width:750*screenRate,
        height:1334*screenRate
      }).then(canvas => {
        var imgUrl = canvas.toDataURL();
        $('[data-id="image"]').attr('src',imgUrl)
      });
    }
  })

</script>
</body>
</html>
{else}

{template header}
<div class="container">

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-8">
                    <form method="POST"  enctype="multipart/form-data" id="form1" >
                    <div class="form-group">
                        <label>你还没有上传过证件照片，请上传一张可以看清正脸的半身照片，为避免上传后拉伸变形，上传前可以先把照片裁切成正方形。</label>
                        <div class="">
                            <img id="picshow" valign="middle" src="" style="height: 150px;">
                            <div style="display: flex;">
                                <input type="file" id="picfile" name="picfile">
                                <div id="picsubmit" class="btn btn-success">上传照片</button>
                                    <input type="hidden" name="photo" id="photo" />
                                </div>
                            </div>
                        </div>
                    </div>
                   </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{SITE_URL}public/js/image.js"></script>
<script>
    $(function(e){
    var picFile = null;
    // 头像上传监听
    $('#picfile').on("change", function (e) {
        $("#photo").val('');
        $("#picshow").attr('src', '');

        let file = e.target.files[0];
        compressImg(file, 0.25).then(res => {
            $("#picshow").attr('src', window.URL.createObjectURL(res.file));
        picFile = res.file;
    });
    });

    var upload_url = "{SITE_URL}index.php?app=group&ac=cert2&ts=photo";
    $('#picsubmit').on("click", function () {
        if (!picFile) {
            return bootbox.alert('请选择图片！');
        }
        var formData = new FormData();
        formData.append("file", picFile, picFile.filename);
        formData.append("upload_file", true);
        console.log(formData, picFile)
        $.ajax({
            url: upload_url,
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            beforeSend :function(xmlHttp){
                xmlHttp.setRequestHeader("If-Modified-Since","0");
                xmlHttp.setRequestHeader("Cache-Control","no-cache");
            },
            success: function(result){
                if (result ) {
                    window.location.href=siteUrl+'index.php?app=group&ac=cert2&groupid='+{$groupid};
                } else {
                    return bootbox.alert('图片上传失败！');
                }
            }
        });
    });
    });
</script>
{template footer}


{/if}